<template>
  <div class="nav-header">
    <div class="contanier">
      <a href="/" class="left-content">木也专栏</a>
      <div class="right-content">
        <div class="login-resgiter" v-if="user.isLogin">
          <a-button ghost style="margin-right: 10px" @click="goLogin">登录</a-button>
          <a-button ghost>注册</a-button>
        </div>
        <a-dropdown v-if="!user.isLogin">
          <a class="ant-dropdown-link" @click.prevent>
            您好,{{user.name}}
          </a>
          <template #overlay>
            <a-menu>
              <a-menu-item>
                <a href="/new-article">新建文章</a>
              </a-menu-item>
              <a-menu-item>
                <a href="javascript:;">编辑资料</a>
              </a-menu-item>
              <a-menu-item>
                <a href="javascript:;">退出登录</a>
              </a-menu-item>
            </a-menu>
          </template>
        </a-dropdown>
      </div>
    </div>
    <!-- <h5>{{kang}}</h5> -->
  </div>
</template>

<script lang="ts">
import { defineComponent, PropType } from 'vue';
import { useRouter } from 'vue-router';
interface userType {
  isLogin: boolean;
  name?: string;
  id?: number;
}
export default defineComponent({
  name: 'nav-header',
  props: {
    user: {
      type: Object as PropType<userType>,
      require: true
    }
  },
  setup(prop) {
    const router = useRouter();
    const goLogin = () => { router.push('/login') };
    const kang = prop.user;
    return {
      goLogin,
      kang
    }
  }
});
</script>

<style lang="less" scoped>
.nav-header {
  width: 100%;
  height: 70px;
  background-color: #0d6efd;
  .contanier {
    width: 1200px;
    height: 100%;
    line-height: 70px;
    margin: auto;
    display: flex;
    justify-content: space-between;
    align-content: center;
    .left-content {
      font-size: 20px;
      color: #fff;
    }
    .right-content {
      .ant-dropdown-link {
        color: #fff;
      }
    }
  }
}
</style>
